<template>
  <div>
    <h1>Upload Image Array to Web3.Storage</h1>
    <input type="file" multiple @change="handleFileChange" />
    <button @click="uploadImages" :disabled="files.length === 0">Upload</button>
    <div v-if="contentCids">
      Images uploaded successfully. Directory CID: {{ contentCids }}
    </div>
  </div>
</template>

<script>
import { create } from '@web3-storage/w3up-client'


export default {
  data() {
    return {
      files: [],
      contentCids: "",
      client: null
    };
  },
  mounted() {
    // Initialize Web3.Storage client
    this.initClient();
  },
  methods: {
    handleFileChange(e) {
      this.files = Array.from(e.target.files);
    },
    async initClient() {
      this.client = await create()
      await this.client.login('1933501072@qq.com')
      await this.client.setCurrentSpace('did:key:z6Mkv1AykoVeEnDrzVjAjCFLHcyfaryn6xYupCkVaeiPMAF5') // select the relevant Space DID that is associated with your account


    },
    async uploadImages() {

      if (this.files.length === 0) {
        alert('Please select at least one file to upload.');
        return;
      }
      // Upload directory with files
      const directoryCid = await this.client.uploadDirectory(this.files);
      this.contentCIDs = directoryCid;
      console.log("==========" + this.contentCIDs)
      const fon = await this.client.capability.upload.get(directoryCid)
      console.log(fon)
      const rootCID = fon.root;
      console.log(rootCID)


      //  const list=this.client.capability.upload.list({ cursor: '', size: 25 })
      //  console.log(list)
      //this.contentCids = result; // 内容 CIDs

    }
  }


}
</script>

<style></style>
